<script setup>
import Table from "@/components/table/index.vue";
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from "vue";
import { getListByPageAPI, delAPI, findOne } from "@/api/wedding/rightInfo";
import rightInfoLayer from "./layer.vue";
import { addAPI, updateAPI } from '@/api/wedding/rightInfo'

/************************************定义变量************************************************/
//表格数据
const tableData = ref([]);
//表格loading
const loading = ref(false);
//选中的数据
const chooseData = ref([]);
//表格选中数据事件
const handleSelectionChange = (val) => {
  chooseData.value = val;
};
const ruleForm = ref(null)
const rules = {
  // isPrivacy: [{ required: true, message: '请输入是否隐私政策推送', trigger: 'blur' }],
  // privacy: [{ required: true, message: '请输入隐私政策内容', trigger: 'blur' }],
  // isAgreement: [{ required: true, message: '请输入是否用户协议推送', trigger: 'blur' }],
  // agreement: [{ required: true, message: '请输入用户协议内容', trigger: 'blur' }],
  // isDiscount: [{ required: true, message: '请输入优惠卷开关', trigger: 'blur' }],
  // withdrawalFee: [{ required: true, message: '请输入用户提现手续费比例', trigger: 'blur' }],
  // commission: [{ required: true, message: '请输入平台抽佣比例', trigger: 'blur' }],
  // fileSize: [{ required: true, message: '请输入上传图片大小', trigger: 'blur' }],
}
let form = ref({
  id: null,
  isPrivacy: null,
  privacy: null,
  isAgreement: null,
  agreement: null,
  isDiscount: null,
  withdrawalFee: null,
  commission: null,
  creator: null,
  fileSize: null,
  phone: null,
  createTime: null,
  updateTime: null,
  delFlag: null,
});
// 弹窗控制器
const layer = reactive({
  show: true,
  title: "新增",
  showButton: true,
});
// 存储搜索用的数据
const query = reactive({
  params: "",
});
// 分页参数, 供table使用
const page = reactive({
  index: 1,
  size: 20,
  total: 1,
});

/************************************定义弹窗************************************************/
// 新增弹窗功能
const handleAdd = () => {
  layer.title = "新增数据";
  layer.show = true;
  delete layer.row;
};
// 编辑弹窗功能
const handleEdit = (row) => {
  layer.title = "编辑数据";
  layer.row = row;
  layer.show = true;
};
/************************************定义事件************************************************/
//提交按钮事件
let submit = () => {
  if (ruleForm) {
    ruleForm.value.validate((valid) => {
      if (valid) {
        let params = form.value;
        if (form.value.id) {
          updateForm(params);
        } else {
          addForm(params);
        }
      } else {
        return false;
      }
    });
  }
};

let updateForm = (params) => {
  updateAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    layerDom && layerDom.value.close();
  });
};

let addForm = (params) => {
  addAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    layerDom && layerDom.value.close();
  });
};
/************************************定义事件************************************************/
// 批量删除功能
const handleDel = (data) => {
  let params = data.map((e) => {
    return e.id;
  });
  delAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    getTableData(true);
  });
};
// 搜索功能
const getTableData = (init) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    current: page.index,
    pageSize: page.size,
    ...query,
  };
  getListByPageAPI(params)
    .then((res) => {
      tableData.value = res.data.list;
      page.total = Number(res.data.total);
    })
    .catch((error) => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

const findOneRight = () => {
  findOne().then((res) => {
      if (res.data) {
        form.value = res.data;
      } else {
        ElMessage({
          type: "error",
          message: "获取数据失败",
        });
      }
    })
};
/************************************生命周期************************************************/
//获取表格数据
onMounted(() => {
  // 在组件挂载后执行的代码
  findOneRight();
  getTableData(true);
});
</script>

<template>
  <div class="layout-container">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <el-form-item label="是否隐私政策推送：" prop="isPrivacy">
        <el-select v-model="form.isPrivacy" placeholder="请选择是否隐私政策推送">
          <el-option label="是" value="0"></el-option>
          <el-option label="否" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="隐私政策内容：" prop="privacy">
        <el-input
          type="textarea"
          v-model="form.privacy"
          placeholder="请输入隐私政策内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否用户协议推送：" prop="isAgreement">
        <el-select v-model="form.isAgreement" placeholder="请选择是否隐私政策推送">
          <el-option label="是" value="0"></el-option>
          <el-option label="否" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户协议内容：" prop="agreement">
        <el-input
          type="textarea"
          v-model="form.agreement"
          placeholder="请输入用户协议内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="优惠卷开关：" prop="isDiscount">
        <el-select v-model="form.isDiscount" placeholder="请选择优惠卷开关">
          <el-option label="开" value="0"></el-option>
          <el-option label="关" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户提现手续费比例：" prop="withdrawalFee">
        <el-input
          v-model="form.withdrawalFee"
          placeholder="请输入用户提现手续费比例"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台抽佣比例：" prop="commission">
        <el-input v-model="form.commission" placeholder="请输入平台抽佣比例"></el-input>
      </el-form-item>
      <el-form-item label="上传图片大小：" prop="fileSize">
        <el-input v-model="form.fileSize" placeholder="请输入上传图片大小"></el-input>
      </el-form-item>
      <el-form-item label="客服电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入客服电话"></el-input>
      </el-form-item>
      <el-form-item label="分享文案" prop="shareContent">
        <el-input v-model="form.shareContent" placeholder="请输入分享文案"></el-input>
      </el-form-item>
      <el-form-item label="体现规则" prop="cashRule">
        <el-input v-model="form.cashRule" placeholder="请输入体现规则"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="layout-container-table">
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :data="tableData"
        @getTableData="getTableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="isPrivacy" label="是否隐私政策推送" align="center">
          <template #default="scope">
            <span>{{ scope.row.isPrivacy === 0 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isAgreement" label="是否用户协议推送" align="center">
          <template #default="scope">
            <span>{{ scope.row.isAgreement === 0 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isDiscount" label="优惠卷开关" align="center">
          <template #default="scope">
            <span>{{ scope.row.isDiscount === 0 ? "开" : "关" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="withdrawalFee" label="用户提现手续费比例" align="center" />
        <el-table-column prop="commission" label="平台抽佣比例" align="center" />
        <el-table-column prop="fileSize" label="上传图片大小" align="center" />
        <el-table-column prop="phone" label="客服电话" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="删除" @confirm="handleDel([scope.row])">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
    </div>
    <rightInfoLayer :layer="layer" @getTableData="getTableData" v-if="layer.show" /> -->
  </div>
</template>

<style lang="scss" scoped></style>
